<template>
    <view class="course">
        <uv-sticky>
            <view class="course__header">
                <uv-tabs :list="[{name:'全部'},{name:'免费活动'},{name:'专题讲座'},{name:'沙龙活动'},{name:'会议培训'}]"
                    :activeStyle="{color:'#000',padding:'10rpx 20rpx',fontWeight:'bold'}"
                    :customStyle='{display:"inline-block"}' lineColor="transparent"
                    :itemStyle="{height:'auto',padding:'0'} " :inactiveStyle="{padding:'10rpx 20rpx',color:'#6f7379'}">
                    <template v-slot:right>
                        <view style="padding-left: 4px;">
                            <uv-icon name="list" size="21" bold color="#000"></uv-icon>
                        </view>
                    </template>
                </uv-tabs>
                <uv-divider></uv-divider>
                <view class="sort-tabs flex my-20 fs-22 items-center">
                    <view class="sort-tabs__items flex">
                        <view class="sort-tabs__item">最新</view>
                        <view class="sort-tabs__item">热门</view>
                        <view class="sort-tabs__item">价格</view>
                    </view>
                    <view class="sort-tabs__toggle ml-40 flex items-center">
                        <view class="mr-10">隐藏已购</view>
                        <uv-switch size="15"></uv-switch>
                    </view>
                    <view class="sort-tabs__record flex px-10 items-center">
                        <uv-icon name="empty-order" size="20"></uv-icon>
                        <view class="ml-5">学习记录</view>
                    </view>
                </view>
            </view>

        </uv-sticky>
        <view class="course__content">

            <view class="course_card rounded-20 overflow-hidden" @click="play">
                <view class="course__cover overflow-hidden h-200">
                    <image src="/static/logo.png" mode="aspectFill"></image>
                </view>
                <view class="p-15 bgc-ffffff">
                    <view class="course__title fs-28 fw-600">
                        2024年心理咨询行业咨询
                    </view>
                    <view class="course__info fs-22 c-888888 flex items-center">
                        共87讲
                        <uv-line direction="col" margin="15rpx" color="#b3b4b8" length="12"></uv-line>
                        1650人已学
                    </view>
                    <view class="course__bar flex justify-between items-center">
                        <Price :current="192" :original="222"></Price>
                        <uv-button text="播放" shape="circle" size="mini" icon="play-circle" iconColor="#fff"
                            color="linear-gradient(to right, #7f72e3, #ca76ff)"></uv-button>

                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import Price from "@/components/Price.vue";
    const play = () => {
        uni.navigateTo({
            url: "/pages/course/detail"
        })
    }
</script>
<style lang="scss" scoped>
    .sort-tabs {
        &__item {
            text-align: center;
            padding: 0 20rpx;
            border-right: 1px #000 solid;
        }

        &__toggle {
            color: #bfbfbf;
        }

        &__item:last-child {
            border-right: none;
        }

        &__record {
            margin-left: auto;
        }
    }

    .course {
        min-height: 100vh;
        background-color: #f3f5fd;

        &__header {
            background-color: #fff;
        }

        &__card {}

        &__content {

            display: grid;
            padding: 30rpx;
            grid-template-columns: repeat(2, calc(50% - 15rpx));
            gap: 30rpx 30rpx;
            box-sizing: border-box;
        }
    }
</style>